<template>
  <el-dialog :title='form.id ==0? "新增":"修改"' :visible.sync="modelinfo.status">
    <el-form :model="form" ref="ruleForm" label-width="100px" :rules="rules">
      <el-form-item label="角色名称" prop="rolename">
        <el-input v-model="form.rolename" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="角色权限" prop="menus">
        <!--  -->
        <el-tree
        :data="menuList"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="tree"
        highlight-current
        :props="defaultProps">
        </el-tree>

        <!--  -->
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapActions, mapState } from "vuex";
import vm from '../../vm/vm'
export default {
  props: ["modelinfo"],
  computed: {
    ...mapState({ menuList: (state) => state.menu.menuList }),
  },
  methods: {
    ...mapActions("menu", ["menuListAction"]),
    submit() {
      var url=this.form.id == 0?"/roleadd":"/roleedit";
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.$http.post(url, this.form).then((res) => {
            if (res.status == 200) {
              //清空表单
              this.form = {
                id: 0,
                rolename: "",
                menus: "",
                status: 1,
              };
              this.$refs["tree"].setCheckedKeys([]);
              //关闭模态框
              this.modelinfo.status = false;
              //刷新列表
              this.$emit("updateRoleList");
            }
          });
        }
      });
    },
  },
  //角色修改
  created() {
    vm.$on("sendData",(result)=>{
      this.modelinfo.status = true
      this.form  = result
      setTimeout(()=>{
      this.$refs["tree"].setCheckedKeys(result.menus.split(","))
      },50)
      
    })
    this.menuListAction();
  }, 
  data() {
    var checkTree = (rule, value, callback) => {
      var obj = this.$refs["tree"].getCheckedKeys();
      if (obj.length == 0) {
        return callback(new Error("角色权限不能为空"));
      }
      this.form.menus = obj.join(",");
      callback();
    };
    return {
      form: {
        id: "0",
        rolename: "",
        menus: "",
        status: "1",
      },
      defaultProps: {
        children: "children",
        label: "title",
      },
      rules: {
        rolename: {  required: true, message: "角色名称不可以为空", trigger: "blur",
        },
        status: {
          required: true,
          message: "角色状态不可以为空",
          trigger: "blur",
        },
        menus: { validator: checkTree, trigger: "blur" },
      },
    };
  },
};
</script>

<style>
</style>